<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <link href="/static/css/app.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-success">
        <div class="container-fluid">
            <span class="navbar-brand">企业云资源申请系统</span>
            <div class="navbar-nav ms-auto">
                <span class="nav-link">欢迎, {{.user.Username}} (团队负责人)</span>
                <a class="nav-link" href="/logout">退出</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">管理功能</h6>
                    </div>
                    <div class="list-group list-group-flush">
                        <a href="#" class="list-group-item list-group-item-action active" data-tab="approvals">
                            待审批申请
                        </a>
                        <a href="#" class="list-group-item list-group-item-action" data-tab="team">
                            团队成员
                        </a>
                        <a href="#" class="list-group-item list-group-item-action" data-tab="history">
                            审批历史
                        </a>
                    </div>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-9">
                <!-- 待审批申请 -->
                <div id="approvals-tab" class="tab-content">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">待审批的资源申请</h5>
                            <span class="badge bg-warning">{{len .applications}} 个待处理</span>
                        </div>
                        <div class="card-body">
                            {{range .applications}}
                            {{if eq .Status "pending"}}
                            <div class="card mb-3 border-warning">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h6 class="card-title">{{.ResourceType}} 申请</h6>
                                            <p class="card-text">{{.Description}}</p>
                                            <small class="text-muted">
                                                申请人: {{.Applicant}} | 申请时间: {{.CreatedAt}}
                                            </small>
                                        </div>
                                        <div class="col-md-4 text-end">
                                            <button class="btn btn-success btn-sm me-2" 
                                                    onclick="approveApplication('{{.ID}}', 'approve')">
                                                批准
                                            </button>
                                            <button class="btn btn-danger btn-sm" 
                                                    onclick="approveApplication('{{.ID}}', 'reject')">
                                                拒绝
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{end}}
                            {{else}}
                            <div class="alert alert-info text-center">
                                <h6>暂无待审批申请</h6>
                                <p class="mb-0">当团队成员提交资源申请时，会在这里显示</p>
                            </div>
                            {{end}}
                        </div>
                    </div>
                </div>

                <!-- 团队成员 -->
                <div id="team-tab" class="tab-content d-none">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">团队成员管理</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>用户名</th>
                                            <th>角色</th>
                                            <th>状态</th>
                                            <th>最后活动</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{range .team_members}}
                                        <tr>
                                            <td>{{.name}}</td>
                                            <td>
                                                <span class="badge bg-info">{{.role}}</span>
                                            </td>
                                            <td>
                                                {{if eq .status "active"}}
                                                <span class="badge bg-success">活跃</span>
                                                {{else}}
                                                <span class="badge bg-secondary">非活跃</span>
                                                {{end}}
                                            </td>
                                            <td>2小时前</td>
                                        </tr>
                                        {{end}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 审批历史 -->
                <div id="history-tab" class="tab-content d-none">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">审批历史</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>申请ID</th>
                                            <th>申请人</th>
                                            <th>资源类型</th>
                                            <th>审批结果</th>
                                            <th>审批时间</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{range .applications}}
                                        {{if ne .Status "pending"}}
                                        <tr>
                                            <td>{{.ID}}</td>
                                            <td>{{.Applicant}}</td>
                                            <td>{{.ResourceType}}</td>
                                            <td>
                                                {{if eq .Status "approved"}}
                                                <span class="badge bg-success">已批准</span>
                                                {{else}}
                                                <span class="badge bg-danger">已拒绝</span>
                                                {{end}}
                                            </td>
                                            <td>{{.CreatedAt}}</td>
                                        </tr>
                                        {{end}}
                                        {{else}}
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">暂无审批历史</td>
                                        </tr>
                                        {{end}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 标签页切换
        document.querySelectorAll('[data-tab]').forEach(function(tab) {
            tab.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 更新活动标签
                document.querySelectorAll('.list-group-item-action').forEach(function(item) {
                    item.classList.remove('active');
                });
                this.classList.add('active');
                
                // 切换内容
                document.querySelectorAll('.tab-content').forEach(function(content) {
                    content.classList.add('d-none');
                });
                document.getElementById(this.dataset.tab + '-tab').classList.remove('d-none');
            });
        });

        // 审批申请
        function approveApplication(applicationId, action) {
            const actionText = action === 'approve' ? '批准' : '拒绝';
            
            if (!confirm(`确定要${actionText}这个申请吗？`)) {
                return;
            }
            
            const formData = new FormData();
            formData.append('action', action);
            
            fetch(`/dashboard/approve/${applicationId}`, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert('操作失败: ' + data.error);
                } else {
                    alert('操作成功！');
                    location.reload();
                }
            })
            .catch(error => {
                alert('操作失败: ' + error.message);
            });
        }
    </script>
</body>
</html>